<template>
  <div class="note-sidebar">
    <span class="btn add-note" @click="onAddNote">添加笔记</span>
    <el-dropdown
      class="notebook-title"
      @command="handleCommand"
      placement="bottom"
    >
      <span class="el-dropdown-link">
        {{ curNotebook.title }} <i class="iconfont icon-down"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="notebook in notebooks"
          :command="notebook.id"
          :key="notebook.id"
          >{{ notebook.title }}</el-dropdown-item
        >
        <el-dropdown-item command="trash">回收站</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div class="menu">
      <div>更新时间</div>
      <div>标题</div>
    </div>
    <ul class="notes">
      <li v-for="note in notes" :key="note.id">
        <router-link
          :to="`/note/?noteId=${note.id}&notebookId=${curNotebook.id}`"
        >
          <span class="date">{{ note.friendlyUpdatedAt }}</span>
          <span class="title">{{ note.title }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { Message } from "element-ui";
import { mapActions, mapGetters, mapMutations } from "vuex";
export default {
  created() {
    this.getNotebooks()
      .then(() => {
        this.setCurBook({ curBookId: this.$route.query.notebookId });
        if (this.curNotebook.id == undefined) {
          return;
        }
        return this.getNotes({ notebookId: this.curNotebook.id });
      })
      .then(() => {
        this.setCurNote({ curNoteId: this.$route.query.noteId });
        let route_notebookId = this.$route.query.notebookId || "";

        let route_noteId = this.$route.query.noteId || "";

        if (
          route_notebookId === this.curNotebook.id &&
          route_noteId == this.curNote.id
        )
          return;
        this.$router.replace({
          path: "/note",
          query: {
            noteId: this.curNote.id,
            notebookId: this.curNotebook.id,
          },
        });
      });
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      curNote: "curNote",
      curNotebook: "curNotebook",
      notes: "notes",
      notebooks: "notebooksList",
    }),
  },
  methods: {
    ...mapMutations(["setCurBook", "setCurNote"]),
    ...mapActions(["getNotes", "addNote", "getNotebooks"]),
    handleCommand(notebookId) {
      if (notebookId == "trash") {
        return this.$router.push("/trash");
      }
      this.setCurBook({ curBookId: notebookId });
      this.getNotes({ notebookId }).then(() => {
        this.setCurNote({});
        this.$router.replace({
          path: "/note",
          query: {
            noteId: this.curNote.id,
            notebookId: this.curNotebook.id,
          },
        });
      });
    },
    onAddNote() {
      if (this.curNotebook.id == undefined) {
        Message.info("请先创建一个笔记本");
        return;
      }
      this.addNote({ notebookId: this.curNotebook.id, title: "", content: "" });
    },
  },
};
</script>
<style lang="less">
@import url("../assets/note-sidebar.less");
</style>
